﻿@model Jb.Web.ViewModels.SavedSearchViewModel
@using Jb.Web.Utility;

@{
	String pageTitle = "Advanced Job Search";
    
    ViewBag.Title = Html.GetPageTitle(pageTitle);
	//ViewData[AppConstants.ViewDataKeys.SELECTED_MENU] = JobSeekerMenu.Resume;
	bool _HasSaved = ViewData.HasSaved();
    List<Jb.Web.ViewModels.CategoryViewModel> _Categories = ApplicationCache.Categories;
}

<div class="jb-page-heading">
    <h1>@pageTitle</h1>
    <div>Enter necessary information and then click the Save button.</div>
</div>
<div style="min-height:280px;">
    @*Tab Container Start*@
    <div style="margin:0px 20px 0px 20px;">
        <ul class="nav nav-tabs" id="SearchTab">
          <li class="active"><a href="#SearchForm" data-toggle="tab">Search Option</a></li>
          <li><a href="#SearchResult" data-toggle="tab">Search Result</a></li>
        </ul>

        <div class="tab-content">
          <div class="tab-pane active" id="SearchForm">
            @*Start of Search Form*@
            <div id="divSearchForm" class="jb-page-content">
            @using (Html.BeginForm())
            {
                @Html.ValidationSummary(false)
                if (Model == null)
                {
                    @: @Html.WarningMessageBox("Sorry! Requested AdvancedJobSearch was not found for edit.")
                }
                else
                {
                <div class="row-fluid">
                    <div class="span4">
                        @if (_HasSaved)
                        {
                            @Html.SuccessMessageBox("Congratulations! The AdvancedJobSearch saved successfully")
                        }
                        else if (ViewData[AppConstants.ViewDataKeys.SAVED] != null && !_HasSaved)
                        {
                            @Html.WarningMessageBox("Sorry! we could not save the AdvancedJobSearch.")
                        }
		                <div class="editor-label">
			                @Html.LabelFor(model => model.Keyword)
		                </div>
		                <div class="editor-field">
			                @Html.TextBoxFor(model => model.Keyword)
			                @Html.ValidationMessageFor(model => model.Keyword)
		                </div>
		                <div class="editor-label">
			                @Html.LabelFor(model => model.CountryID)
		                </div>
		                <div class="editor-field">
			                    @Html.DropDownListFor(model => model.CountryID, BindSelectList.Countries())
		                        @Html.ValidationMessageFor(model => model.CountryID)
		                </div>
		                <div class="editor-label">
			                @Html.LabelFor(model => model.StateID)
		                </div>
		                <div class="editor-field">
			                @Html.DropDownListFor(model => model.StateID, BindSelectList.States(Model.CountryID.GetValueOrDefault()))
		                    @Html.ValidationMessageFor(model => model.StateID)
		                </div>
		                <div class="editor-label">
			                @Html.LabelFor(model => model.CityID)
		                </div>
		                <div class="editor-field">
                            @Html.DropDownListFor(model => model.CityID, BindSelectList.CitiesByState(Model.StateID.GetValueOrDefault()))
                            @Html.ValidationMessageFor(model => model.CityID)
		                </div>
                        <div class="editor-label">
			                @Html.LabelFor(model => model.SalaryRange)
		                </div>
		                <div class="editor-field">
                            @Html.DropDownListFor(model => model.SalaryRange, BindSelectList.SalaryRange())
			                @Html.ValidationMessageFor(model => model.SalaryRange)
		                </div>
                    </div>
                    <div class="span6">
                        <div class="editor-label">
			                @Html.LabelFor(model => model.CategoryID)
		                </div>
		                <div class="editor-field">
                            <span id="spanSelectedCategory">
                            @if (Model.CategoryID > 0)
                            {
                                @Html.GetCategoryBreadCrumb(Model.CategoryID.GetValueOrDefault(), true)
                            }
                            </span>
			                @Html.HiddenFor(model => model.CategoryID)
			                @Html.ValidationMessageFor(model => model.CategoryID)
                            <a href="javascript:void(0);" id="aSelectCategory" class="btn">Select Category</a>
		                </div>
		                @*<div class="editor-label">
			                @Html.LabelFor(model => model.SubCategoryID)
		                </div>
		                <div class="editor-field">
			                @Html.TextBoxFor(model => model.SubCategoryID)
			                @Html.ValidationMessageFor(model => model.SubCategoryID)
		                </div>*@
		                <div class="editor-label">
			                @Html.LabelFor(model => model.PostDate)
		                </div>
		                <div class="editor-field">
			                @Html.DropDownListFor(model => model.PostDate, BindSelectList.PostDates())
			                @Html.ValidationMessageFor(model => model.PostDate)
		                </div>
		                <div class="editor-label">
			                @Html.LabelFor(model => model.EmployeeTypeID)
		                </div>
		                <div class="editor-field">
			                @Html.DropDownListFor(model => model.EmployeeTypeID, BindSelectList.EmployeeType())
			                @Html.ValidationMessageFor(model => model.EmployeeTypeID)
		                </div>
		                <div class="editor-label">
			                @Html.LabelFor(model => model.JobLevelID)
		                </div>
		                <div class="editor-field">
			                    @Html.DropDownListFor(model => model.JobLevelID, BindSelectList.JobLevels())
			                @Html.ValidationMessageFor(model => model.JobLevelID)
		                </div>		        
                    </div>
                    <div class="clear"></div>
            
                    <div class="jb-button-container-099">
			            <button class="btn btn-primary" type="button" data-loading-text="Searching..." onclick="SaveState();">Search</button>			        
		            </div>            
                </div>
                <!--Modal Popup Section Start-->
                <div id="divCategoryDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="divPhotoEditModalLabel" aria-hidden="true">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
                        <h4 id="myModalLabel">Select Job Category</h4>
                    </div>
                    <div class="modal-body jb-inline-label">                
                        @Html.SelectableCategoryList(_Categories, true, Model.CategoryID.GetValueOrDefault())
                        <div class="clear"></div>          
                    </div>
                    <div class="modal-footer">               
                        <button class="btn btn-primary" type="button" onclick="SelectCategory();" value=""><i class="icon-ok icon-white"></i> Select</button>
                        <button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-off"></i> Cancel</button>
                    </div>
                </div>
                <!--Modal Popup Section End--> 
                }
            }        
            </div>
            @*End of Search Form*@
          </div>
          <div class="tab-pane" id="SearchResult">
            <div id="divSearchSelections"></div>
            <div id="divNoResultMsg"></div>
            <div id="divSearchResult"></div>
          </div>
        </div>
    </div>
    @*Tab Container End*@
</div>


@*<div style="min-height:280px; display:none;">
    <div style="background-color:#EFEFEF; border:#CCCCCC 1px solid; padding:5px 20px 5px 20px;">
        <a href="javascript:void(0)" onclick="ShowHideSearchForm(this);"><i class="icon-minus"></i> Search Options</a>
    </div>
</div>*@
@Html.Partial("_SendToFriendModal")


@section PageHeadSection{
<style type="text/css">
    .jb-job{padding:0px 0px 10px 0px;}
    #divSearchSelections{margin-bottom:10px; border-bottom:#efefef 1px solid; padding-bottom:4px;}
    .jb-page-content{padding: 0px 0px 10px 0px;}
</style>
}
@section JavaScriptPlaceHolder
{
    @Html.JavaScript("jquery.validate.min.js", Url)
    @Html.JavaScript("jquery.validate.unobtrusive.min.js", Url)
    @*@Html.JavaScript("jquery-ui-1.8.11.min.js", Url)*@
    @Html.Partial("_DatePicker")
    @Html.JavaScript("Common.js", Url)
    @Html.Partial("_SendToFriendJS")
    @Html.JavaScript("jquery.ba-hashchange.js", Url)
    @*@Html.JavaScript("jquery.ba-bbq.js", Url)*@

    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $('#aSelectCategory').click(function () {
                $('#divCategoryDialog').modal({ show: true });
            });
            $('#CountryID').change(function () {
                Ajax('/Ajax/GetStatesByCountry'
                , 'countryID=' + $(this).val()
                , BindStates_Success);
            });
            $('#StateID').change(function () {
                Ajax('/Ajax/GetCitiesByState'
                , 'stateID=' + $(this).val()
                , BindCities_Success);
            });
            $('#Keyword').live("keypress", function (e) {
                if (e.keyCode == 13) {
                    SaveState();
                    return false; // prevent the button click from happening
                }
            });
        });

        function GetCategoryBreadCrumb(categoryID) {
            var url = '@Url.Action("GetCategoryBreadCrumb", "Ajax", new { area = AppConstants.Area.PUBLIC })';
            var data = 'categoryID=' + categoryID;
            Ajax(url, data, function (result) { $('#spanSelectedCategory').html(result); HideLoadingAnimation(); $('#divCategoryDialog').modal('hide'); });
        }
        function SelectCategory() {            
            var categoryID = $('#divCategoryDialog input[type=radio]:checked').val();
            if(categoryID == undefined || categoryID == null || categoryID == 0)            
                alert("Please Select a Category."); //$('#dialog').html('Please Select a Category.').dialog('open');            
            else
            {                
                //$(_CategoryDialog).dialog('close');
                ShowLoadingAnimation(false);                
                GetCategoryBreadCrumb(categoryID);                
                $('#CategoryID').val(categoryID);
                //BindSkills(categoryID);                
            }
        }
        function BindStates_Success(result) {
            var types = eval(result);
            BindDDL(types, $('#StateID'));
        }
        function BindCities_Success(result) {
            var types = eval(result);
            BindDDL(types, $('#CityID'));
        }

        var _SearchParams = null;
        ///Search Methods
        function GetSearchResult() {
            //$('#divSearchForm').slideUp('slow');
            ShowLoadingAnimation(false);            
            //alert(data);
            Ajax('/Job/AdvancedSearch', _SearchParams, function (result) {
                HideLoadingAnimation();
                $('#divSearchResult').html(result);
                $('#SearchTab a:last').tab('show');
                ShowSearchSelections(_SearchParams);
                if (result.length > 0) $('#divNoResultMsg').html('');
                else $('#divNoResultMsg').html(WarningMessageBox('Sorry! could not find any job, with your given search criteria. Please change some criteria and try again!', 'Search Result'));
            });
        }

        function ShowSearchSelections(data) {
            var html = '';
            if(data.Keyword.length > 0) html += '<b>Keyword: </b>' + HtmlEncode(data.Keyword) + ' ';
            if(data.CountryID > 0) html += '<b>Country: </b>' + $('#CountryID option:selected').text() + ' ';
            if(data.StateID > 0) html += '<b>State: </b>' + $('#StateID option:selected').text() + ' ';
            if(data.CityID > 0) html += '<b>City: </b>' + $('#CityID option:selected').text() + ' ';
            if(data.SalaryRange > 0) html += '<b>Salary Range: </b>' + $('#SalaryRange option:selected').text() + ' ';
            if (data.CategoryID.length > 0 && data.CategoryID > 0) html += '<b>Category: </b>' + $('#spanSelectedCategory').html() + ' ';
            if(data.PostDate > -1000) html += '<b>Post Date: </b>' + $('#PostDate option:selected').text() + ' ';
            if(data.EmployeeTypeID > 0) html += '<b>Employee Type: </b>' + $('#EmployeeTypeID option:selected').text() + ' ';
            if(data.JobLevelID > 0) html += '<b>Job Level: </b>' + $('#JobLevelID option:selected').text();
                
            $('#divSearchSelections').html(html);
        }

        /////History Related Code Starts here
        function SaveState() {
            _SearchParams = { Keyword: $('#Keyword').val(), CountryID: $('#CountryID').val(), StateID: $('#StateID').val(), CityID: $('#CityID').val(), SalaryRange: $('#SalaryRange').val(), CategoryID: $('#CategoryID').val(), PostDate: $('#PostDate').val(), EmployeeTypeID: $('#EmployeeTypeID').val(), JobLevelID: $('#JobLevelID').val(), PageNo: 1 };
            if (SearchParamIsEmpty(_SearchParams))
                location.hash = '';
            else
                location.hash = '#Keyword=' + _SearchParams.Keyword + '&CountryID=' + _SearchParams.CountryID + '&StateID=' + _SearchParams.StateID + '&CityID=' + _SearchParams.CityID + '&SalaryRange=' + _SearchParams.SalaryRange + '&CategoryID=' + _SearchParams.CategoryID + '&PostDate=' + _SearchParams.PostDate + '&EmployeeTypeID=' + _SearchParams.EmployeeTypeID + '&JobLevelID=' + _SearchParams.JobLevelID + '&PageNo=1';
        }
        function GetState(key) {
            var hash = location.hash;
            if (key != null && key.length > 0 && hash != null && hash.length > 0) {
                if (hash.substr(0, 1) == '#') hash = hash.substring(1);
                var dictionary = hash.split('&');
                for (var i = 0; i < dictionary.length; i++) {
                    var dictionaryEntry = dictionary[i].split('=');
                    if (dictionaryEntry.length > 1 && dictionaryEntry[0].toLowerCase() == key.toLowerCase())
                        return dictionaryEntry[1];
                }
            }
            return '';
        }
        function SearchParamIsEmpty(searchParams) {
            if (searchParams.Keyword.length <= 0 && searchParams.CountryID <= 0 && searchParams.StateID <= 0 && searchParams.CityID <= 0 && searchParams.SalaryRange <= -1 && searchParams.CategoryID.length <= 0 && searchParams.PostDate <= -1000 && searchParams.EmployeeTypeID <= 0 && searchParams.JobLevelID <= 0)
                return true;
            return false;
        }
        function BuildSearchParam() {
            _SearchParams = { Keyword: GetState('Keyword'), CountryID: GetState('CountryID'), StateID: GetState('StateID'), CityID: GetState('CityID'), SalaryRange: GetState('SalaryRange'), CategoryID: GetState('CategoryID'), PostDate: GetState('PostDate'), EmployeeTypeID: GetState('EmployeeTypeID'), JobLevelID: GetState('JobLevelID'), PageNo: 1 };
        }
        function ClearSearchResult(){
            $('#divSearchResult').html(''); $('#SearchTab a:first').tab('show'); $('#divNoResultMsg').html('');
        }
        $(function () {
            $(window).hashchange(function () {
                var hash = location.hash;
                if (hash == undefined || hash == null || hash.length <= 0)
                    ClearSearchResult();
                else {
                    BuildSearchParam();
                    GetSearchResult();
                }
            });
            $(window).hashchange();
        });
    </script>
}

